<link href="__CDN__/assets/addons/kuerp/css/common.css?v={$Think.config.site.version}" rel="stylesheet">
<link rel="stylesheet" href="__CDN__/assets/addons/kuerp/layui/css/layui.css"  media="all">
<style type="text/css">
    .btn-list {
        position: fixed;
        right: 40px;
    }
    .div-flex {
        display: flex
    }
    .div-flex .form-group {
        margin-right: 50px;
        text-align: center;
        line-height: 25px;
        margin-bottom: 0;
    }
    .tab-pane {
        border: 1px solid #F6F6F6;
    }
    .i-color {
        font-size: 34px;margin-right: 10px;color: #86C3FF;
    }
    .thumbnail {
        display: flow-root;
        width: max-content;
    }
    .thumbnail img {
        width: 50px;
        float: left;
        padding: 5px;
    }
    .text-color{
        color:#777;
    }
</style>
<style type="text/css">
    .examine_title{
        font-size: 14px;
        color: #333;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        display: block;
        height: 30px;
    }
    .examine_box{
        padding-left:20px;
        position: relative;
    }
    .examine_box .newicon{
        position: absolute;
        left:0;
        top:0;
        z-index: 2;
    }
    .examine_box .xian{
        width:1px;
        height:100%;
        background:#e6e6e6;
        position: absolute;
        left:4px;
        top:10px;
        z-index: 1;
    }
    .examine_box .examine_bg{
        position: relative;
        margin-top: 15px;
        border-radius: 4px;
        background-color: #f7f8fa;
        font-size: 12px;
        color: #929293;
        padding: 8px;
        line-height: 18px;
    }
    .rowbox{
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .user-image{
        width: 40px;
        height: 40px;
        border-radius: 50%;

    }
    .stafflist {
        display: flex;
        justify-content: flex-start;
		align-items: center;
        border-bottom:1px solid #f5f5f5;
        margin-bottom: 10px;
    }
    .staffli {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right:12px;
        margin-bottom:12px;
        flex-shrink: 0;
    }
    .staffimg{
        width:30px;
        height:30px;
        border-radius: 50%;
        margin-bottom:5px;
    }
    .staffname{
        font-size:14px;
        color:#999;
    }
    .staffcon {
        margin-left:12px;
    }
    .approval_status{
        font-size:12px;
        color:#333;
        margin-bottom:7px;
    }
</style>
<div class="panel panel-default panel-intro">
    <input type="hidden" name="ids" id="ids" value="{$ids}"/>
    <div class="div-flex">
        <i class="fa fa-address-card i-color"></i>
        <div style="line-height: 35px"><b>{$row.expense_code}</b></div>
    </div>

    
    <div class="div-flex" style="margin-top: 20px">
        <div class="form-group">
            <span class="text-muted">报销编号</span>
            <p>{$row.expense_code}</p>
        </div>

        <div class="form-group">
            <span class="text-muted">报销人</span>
            <p>{if condition="isset($row.admin.nickname)"}{$row.admin.nickname}{/if}</p>
        </div>
        <div class="form-group">
            <span class="text-muted">报销总金额</span>
            <p style="color: red">{$row.cost}</p>
        </div>
        
        <div class="form-group">
            <span class="text-muted">报销月份</span>
            <p>{$row.income_month_text}</p>
        </div>
        <div class="form-group">
            <span class="text-muted">报销日期</span>
            <p>{$row.start_time_text} - {$row.end_time_text}</p>
        </div>
        <div class="form-group">
            <span class="text-muted">打款状态</span>
            <p>{$row.pay_status == 1 ? '已打款' : '未打款'}</p>
        </div>
        <div class="form-group">
            <span class="text-muted">备注</span>
            <p>{$row.remark}</p>
        </div>
    </div>
    <div>

        <ul class="nav nav-tabs" role="tablist">
            <!-- <li role="presentation" class="active"><a href="#basic" aria-controls="profile" role="tab" data-toggle="tab">基本信息</a></li> -->
            <li role="presentation"  class="active"><a href="#product" aria-controls="profile" role="tab" data-toggle="tab">报销明细</a></li>
            <li role="presentation"><a href="#settings4" aria-controls="settings" role="tab" data-toggle="tab">相关附件</a></li>
        </ul>

        <div class="tab-content" style="overflow-y: scroll;height:350px">
            <div role="tabpanel" class="tab-pane fade in active panel-body" id="product">
                <table class="table table-striped table-bordered table-hover table-nowrap" width="100%">
                    <thead>
                        <tr>
                            {foreach name="fields" item="vo"}
                            <th>{$vo.comment}</th>
                            {/foreach}
                        </tr>
                    </thead>
                    <tbody>
                        {foreach name="info_list" item="vo" key="k"}
                        <tr>
                            {foreach name="fields" item="field"}
                            <td>{$field['name'] == 'expense_time' ? $vo['expense_time_text'] : $vo[$field['name']]}</td>
                            {/foreach}
                        </tr>
                        {/foreach}
                    </tbody>
                </table>
            </div>
            <div role="tabpanel" class="tab-pane fade panel-body" id="settings4">
                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                        {if condition="!empty($row.file_list)"}
                        {foreach name="row.file_list" item="vo" key="k"}
                        {if $vo.type == 'file'}
                        <a href="{$vo.file_path}" target="_blank"><img src="{:url('ajax/icon')}?suffix={$vo.ext}" alt="" style="max-height:120px;max-width:120px"></a>
                        {else /}
                        <a href="{$vo.file_path}" target="_blank"><img src="{$vo.file_path}" style="max-height:120px;max-width:120px;"></a>
                        {/if}
                        {/foreach}
                        {/if}
                    </div>
                </div>
                <!-- <table class="table table-striped table-bordered table-hover table-nowrap" width="100%">
                    <thead>
                        <tr>
                            <th></th>
                            <th>文件名</th>
                            <th>大小</th>
                            <th>上传时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        {foreach name="row.file_list" item="vo" key="k"}
                        <tr>
                            <td>
                                <div style="width:120px;margin:0 auto;text-align:center;overflow:hidden;white-space: nowrap;text-overflow: ellipsis;">
                                {if $vo.type == 'file'}
                                <a href="{$vo.file_path}" target="_blank"><img src="{:url('ajax/icon')}?suffix={$vo.ext}" alt="" style="max-height:60px;max-width:120px"></a>
                                {else /}
                                <a href="{$vo.file_path}" target="_blank"><img src="{$vo.file_path}" alt="" style="max-height:60px;max-width:120px"></a>
                                {/if}
                                </div>
                            </td>
                            <td>{$vo.name|default=''}</td>
                            <td>{$vo.size|default=''}</td>
                            <td>{$vo.createtime|default=''}</td>
                        </tr>
                        {/foreach}
                    </tbody>
                </table> -->
            </div>
        </div>

    </div>
    <div style="margin-top: 10px"></div>
    <div class="row">
        <div class="col-xs-12">
            <div class="form-group">
                <label class="control-label col-xs-12 col-sm-1">审批流程:</label>
                <div class="col-xs-12 col-sm-10">
                    <ul class="layui-timeline">
                        {foreach name="stepList" item="vo"}
                        <li class="layui-timeline-item">
                            <i class="layui-icon layui-timeline-axis"></i>
                            <div class="layui-timeline-content layui-text">
                                <div class="layui-timeline-title">{$vo.status == 1 ? '指定员工(任意一人)' : '指定员工(会签)'}</div>
                                {foreach name="vo.stafflist" item="v"}
                                <div class="stafflist">
                                    <div class="staffli">
                                        <img src="{$v.img}" class="staffimg" mode=""/>
                                        <div class="staffname">{$v.name}</div>
                                    </div>
                                    <div class="staffcon">
                                        <div class="approval_status">{$v.examine_reord.check_time? $v.examine_reord.check_time:''}</div>
                                        <div class="approval_status">
                                            {if condition="$v.examine_reord.status == 1"}
                                            <i class='fa fa-check-circle text-success newicon'></i>
                                            {elseif condition="$v.examine_reord.status == 0 && $v.examine_reord.check_time != ''"}
                                            <i class='fa fa-window-close text-red newicon'></i>
                                            {/if}
                                            {$v.examine_reord.status_text? $v.examine_reord.status_text:''}
                                        </div>
                                        <div class="approval_status">{$v.examine_reord.content?$v.examine_reord.content:''}</div>
                                    </div>
                                </div>
                                {/foreach}
                            </div>
                        </li>
                        {/foreach}
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>